$(document).ready(function() {
	try {
		$('#example').dataTable();
	} catch (err) {
		console.log(err);
	}

	MC.SpendModel = Backbone.Model.extend();
	MC.SpendCollection = Backbone.Collection.extend({
		model : MC.SpendModel
	});
	MC.spendCollection = new MC.SpendCollection();
	MC.spendCollection.reset(MC.monthlySpending);

	// Format the spendCollection to use in chart
	var xAxis = MC.spendCollection.at(0).get('time') || [];
	var yAxis = [];
	_.each(MC.spendCollection.models, function(model) {
		console.log(model);
		var point = {};
		point.name = model.get('bank').name + " - " + model.get('card').brand;
		point.data = model.get('spending');
		yAxis.push(point);
	});

	MC.monthlyChart('chart_div', 'line', xAxis, yAxis);
	
	$(document).ajaxStart(function(){
		$('.updating-label').removeClass('hidden');
	});
	
	$(document).ajaxStop(function(){
		$('.updating-label').addClass('hidden');
	});

	MC.categoryChart('category_chart_div', _.pairs(MC.categorySpending));

	// Render category spendings of card
	MC.CategorySpendModel = Backbone.Model.extend();
	MC.CategorySpendCollection = Backbone.Collection.extend({
		model : MC.CategorySpendModel
	});
	MC.categorySpendCollection = new MC.CategorySpendCollection();
	MC.categorySpendCollection.reset(MC.categorySpendingForCards);

	// Format the spendCollection to use in chart
	var xAxis1 = _.pluck(MC.categorySpendCollection.toJSON(), "card");
	console.log("xAxis1" + xAxis1);
	var yAxis1 = [];
	
	var obj = {};
	// Get all categories
	var keys = [];
	_.each(MC.categorySpendCollection.models, function(model) {
		var modelKeys = _.keys(model.get('spendings'));
		keys = _.union(keys, modelKeys);
	});
	
	// Set keys for obj
	for (var index in keys) {
		var key = keys[index];
		obj[key] = [];
	}
	
	// Push spending to array
	_.each(MC.categorySpendCollection.models, function(model) {
		var point = {};
		var spendings = model.get('spendings');
		for (var index in keys) {
			(function(i) {
				var key = keys[index];
				if (spendings[key] == undefined) {
					spendings[key] = 0;
				}
				obj[key].push(spendings[key]);
			})(index);
		}
	});
	
	// Setup data point
	for (var index in keys) {
		var key = keys[index];
		var point = {};
		point.name = key;
		point.data = obj[key];
		yAxis1.push(point);
	}

	MC.monthlyChart('category_of_card_chart_div', 'column', xAxis1, yAxis1);
	
	MC.ReportView = Backbone.View.extend({
		initialize: function() {
			_.bindAll(this, 'changeReport');
		},
		
		render: function() {
			this.$('input[value="card_spending"]').prop("checked", true);
			$('#category_chart_div').addClass('hidden');
			$('#category_of_card_chart_div').addClass('hidden');
			return this;
		},
		
		events : {
			'change #report-type input' : "changeReport"
		},
		
		hideCharts: function() {
			$('#chart_div').addClass('hidden');
			$('#category_chart_div').addClass('hidden');
			$('#category_of_card_chart_div').addClass('hidden');
		},

		changeReport : function() {
			var reportType = this.$('#report-type :checked').val();
			this.hideCharts();
			
			switch (reportType) {
			case "card_spending":
				$('#chart_div').removeClass('hidden');
				break;

			case "monthly_spending":
				$('#category_of_card_chart_div').removeClass('hidden');
				break;
				
			case "category_spending":
				console.log('reportType: ' + reportType);
				$('#category_chart_div').removeClass('hidden');
				break;	
			}
		}
	});

	MC.reportView = new MC.ReportView({
		el : '.main-content'
	});
	MC.reportView.render();
	
	MC.Events.on('MC_CLICK_PIE', function(data){
		console.log(data);
		$('.dataTables_filter input[type=text]').val(data).trigger('keyup');
		
	});
	
	MC.Events.on('MC_CLICK_CARD_COLUMN', function(data) {
		$('.dataTables_filter input[type=text]').val(data).trigger('keyup');
	});
	

});